import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import { onUnmounted, ref } from 'vue'
export function useObserver (apiFn) {
  const target = ref(null)
  // stop是一个可执行的方法 调用就会停止监听
  // 不管元素进入还是离开市口区域,都不会在执行回调函数
  const { stop } = useIntersectionObserver(
    // 监听的目标元素
    target,
    // isIntersecting布尔值 代表当前监听的元素是否进入视口区域
    ([{ isIntersecting }], observerElement) => {
      // 判断isIntersecting是不是为true,如果为true的话立刻发送ajax请求
      if (isIntersecting) {
        // 发起网络请求
        apiFn()
        // 请求数据完毕停止监听
        stop()
      }
    },
    { threshold: 0 }
  )
  return {
    target
  }
}

// 封装一个倒计时的通用逻辑
// 核心的逻辑: 基于一个数据进行自减操作
// useIntervalFn: 每隔一秒执行一段你自己的逻辑（数据自减）
// useIntervalFn(cb, interval) cb代表的是需要每隔一段时间执行的函数 interval 这个时间
// useIntervalFn(cb, interval) -> return {resume pause} 可以自由的开启和暂停我们要执行cb逻辑
// 在cb中书写自减逻辑 相当于只要一开始执行resume  每隔一段时间完成一次自减
export function useCountDown (time) {
  // 完成倒计时逻辑
  const countTime = ref(0)
  const { resume, pause } = useIntervalFn(() => {
    /* your function */
    if (countTime.value <= 0) {
      pause()
    }
    countTime.value--
  }, 1000, false)
  function start () {
    countTime.value = time
    resume()
  }
  onUnmounted(() => {
    pause()
  })
  return {
    countTime,
    start,
    pause
  }
}
